<template>
	<el-container>
		<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
		<el-aside>
			<el-container>
			</el-container>
		</el-aside>
		<el-container>
			<el-header >
				<div class="left-panel">
				</div>
				<el-icon style="position: absolute;font-size: 20px">
					<component :is="getFileIcon()"/>
				</el-icon>
				<div style="text-align: center;display: inline;font-weight: 600;font-size: 16px">
					{{form.fileName}}
				</div>
				<div class="right-panel">
				</div>
			</el-header>
				<el-main class="nopadding">
				<span v-html="form.content" style="font-size: 14px;"></span>
			</el-main>
		</el-container>
		<el-aside>
			<el-container>
			</el-container>
		</el-aside>
		</sc-water-mark>
	</el-container>
</template>
<script>
export default {
	name: 'File Preview',
	components: {
	},
	data() {
		return {
			attachId:this.$route.query.attachId,
			extName:this.$route.query.extName,
			isNetDisk:this.$route.query.isNetDisk,
			netDiskId:this.$route.query.netDiskId,
			form:{
				content:"",
				fileName:"",
				extName:""
			},
			waterMarkContent:'',
			waterMarkSubtext:'',
			waterMark:'0',
		}
	},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
		this.onLinePreview()
	},
	methods:{
		async onLinePreview()
		{
			var res = await this.$API.file.onLinePreview.get({attachId: this.attachId, isNetDisk: this.isNetDisk,netDiskId:this.netDiskId});
			if (res.code == 200) {
				this.form = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		getFileIcon()
		{
			return "sc-icon-"+this.extName.substr(1,this.extName.length);
		}
	}
}
</script>
